<template>
  <el-input
    v-if="item.type === 'input' || item.type === 'textarea'"
    :value="formData[item.key]"
    :type="item.type"
    :autosize="item.type === 'input' ? false : item.bind.autosize || { minRows: 4, maxRows: 6 }"
    :placeholder="item.bind.placeholder || `请输入${item.label}`"
    :clearable="item.bind.clearable || true"
    v-bind="item.bind"
    v-on="item.on"
    @input="changeValue"
    @keyup.native="item.on.keyupNative"
  >
  </el-input>
  <el-select
    v-else-if="item.type === 'select'"
    :value="formData[item.key]"
    :placeholder="item.bind.placeholder || `请选择${item.label}`"
    :clearable="item.bind.clearable || true"
    v-bind="item.bind"
    v-on="item.on"
    @change="changeValue"
  >
    <el-option
      v-for="option in item.options"
      :key="option.value"
      :label="option.label"
      :value="option.value"
    ></el-option>
  </el-select>
  <el-cascader
    v-else-if="item.type === 'cascader'"
    :value="formData[item.key]"
    :options="item.options"
    v-bind="item.bind"
    v-on="item.on"
    @change="changeValue"
  >
  </el-cascader>
  <el-switch v-else-if="item.type === 'switch'" :value="formData[item.key]" v-bind="item.bind" v-on="item.on" @change="changeValue">
  </el-switch>
  <el-date-picker
    v-else-if="item.type === 'date-picker'"
    :value="formData[item.key]"
    :range-separator="item.bind['range-separator'] || '至'"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    :placeholder="item.bind.placeholder || `请选择${item.label}`"
    v-bind="item.bind"
    v-on="item.on"
    @input="changeValue"
  >
  </el-date-picker>
  <el-time-picker
    v-else-if="item.type === 'time-picker'"
    :value="formData[item.key]"
    :value-format="item.bind['value-format'] || 'HH:mm:ss'"
    :range-separator="item.bind['range-separator'] || '-'"
    start-placeholder="开始时间"
    end-placeholder="结束时间"
    :placeholder="item.bind.placeholder || `请选择${item.label}`"
    v-bind="item.bind"
    v-on="item.on"
    @input="changeValue"
  >
  </el-time-picker>
</template>

<script>
export default {
  props: {
    formData: {
      type: Object,
      default: () => ({})
    },
    item: {
      type: Object,
      default: () => ({})
    },
  },
  methods: {
    changeValue(val) {
      this.$emit('change-value', val)
    }
  }
}
</script>

<style lang='scss' scoped>
</style>
